<template>
  <div class="add-form file-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" label-width="100px" class="hx-form" hide-required-asterisk :rules="rules">
      <el-tabs v-if="editId" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="招标文件" name="first" />
        <el-tab-pane label="投标文件" name="second" />
      </el-tabs>
      <el-form-item v-if="!editId" label="项目名称：" prop="project_id">
        <v-select ref="away" v-model="data.project_id" action="projectList" :query="{status: 1}" class="detail-input" @change="getCustomer" />
      </el-form-item>
      <el-form-item v-if="editId" label="项目名称">
        <el-input v-model="project_name" class="detail-input" />
      </el-form-item>
      <el-form-item label="招标单位：" prop="first_party">
        <el-input v-model="data.first_party" class="detail-input" readonly />
      </el-form-item>
      <el-form-item label="招标时间：" prop="call_date">
        <el-date-picker v-model="data.call_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="截止时间：" prop="expiration_date">
        <el-date-picker v-model="data.expiration_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
      </el-form-item>
      <el-form-item v-if="type === 2" label="投标金额：" prop="bid_sum">
        <el-input v-model="data.bid_sum" class="detail-input" :precision="2" />
      </el-form-item>
      <el-form-item label="标书价格：" prop="tender_price">
        <el-input v-model="data.tender_price" class="detail-input" :precision="2" />
      </el-form-item>
      <el-form-item v-if="type === 2" label="投标保证金：" prop="bid_bond">
        <el-input v-model="data.bid_bond" class="detail-input" :precision="2" />
      </el-form-item>
      <el-form-item v-if="editId && type === 1" label="上传附件：">
        <Adjunct table_name="bidding" :pk="editId" class="detail-input" />
      </el-form-item>
      <el-form-item v-if="editId && type === 2" label="上传附件：">
        <Adjunct table_name="bid" :pk="editId" class="detail-input" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import API from '@/api/bid/bid'
import VSelect from '@/components/select'
import CUSTOMER from '@/api/client/client'
import Adjunct from '@/components/Upload/Adjunct'
export default {
  name: 'Bid',
  inject: ['goUrl', 'isEdit', 'add', 'update', 'setStorage', 'clearStorage', 'getStorage', 'isNumeric'],
  components: { VSelect, Adjunct },
  data() {
    return {
      data: {
        first_party: ''
      },
      title: '',
      editId: null,
      project_name: '',
      type: 1,
      activeName: 'first',
      rules: {
        first_party: { required: true, message: '请输入招标单位', trigger: 'change' },
        project_id: { required: true, message: '请选择项目', trigger: 'change' },
        call_date: { required: true, message: '请输入招标时间', trigger: 'change' },
        expiration_date: { required: true, message: '请输入截止时间', trigger: 'change' },
        tender_price: { required: true, message: '请输入标书价格', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '招投文件详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增招投文件'
      if (this.getStorage('bid')) {
        this.data = this.getStorage('bid')
      }
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        this.project_name = res.data.project.name
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('bid')
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('bid', this.data)
      }
      this.goUrl('/bid')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.data.id = this.editId
            this.update(API, this.data, '更新成功', '/bid')
          } else {
            this.add(API, this.data, '新增成功', '/bid/edit/')
            this.clearStorage('bid')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(tab) {
      this.type = parseInt(tab.index) + 1
    },
    getCustomer() {
      const query = {
        project_id: this.data.project_id
      }
      CUSTOMER.customerList(query).then(res => {
        console.log(res)
        let customerName = ''
        if (res.data.data[0].name) {
          customerName = res.data.data[0].name
        }
        this.data.first_party = customerName
        console.log(this.$refs.away)
        if (this.edit) {
          this.$refs.away.blur()
        }
      })
    }
  }
}
</script>
<style>
.file-form .el-input__inner {
  width: 230px;
}
</style>
